<script setup lang="ts">
import { ref } from 'vue';
import Son from './son.vue'
// 指令 v-model 其实是 :value + @input组合的一个指令
const money = ref(100)
const changeMoney = (val: number) => {
  money.value = val
}
</script>
<template>
  <div style="border: 2px solid #000; margin: 20px">
    父组件
    <!-- <Son :value="money" @input="changeMoney"></Son> -->
    <!-- 在vue2中 在组件上这种写法
        子组件接收的数据必须是value
        子组件发布的自定义事件必须是input事件
        在vue3中 在组件上这种写法 子组件接收的数据 必须叫modelValue 
        v-model="money" 这是一个简写 完整写法是 v-model:modelValue="money"

        在vue3中 如果组件上直接写了 v-model="属性"  组件内接收数据必须是 modelValue 而且 自定义事件
        必须是 update:modelValue
    -->
    <Son v-model="money"></Son>
    <!-- 上下两行代码是等价的  第一种是简写 -->
    <Son v-model:modelValue="money"></Son>
  </div>
</template>
<style scoped>
</style>